<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'index.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <script type="text/javascript" src=" <%=request.getContextPath()%>/js/jquery.js"></script>
    <script>
        function sumit() {


            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "<%=request.getContextPath()%>/join",//url
                data: $('#form1').serialize(),
                success: function (result) {

                    alert(result)
                    location.reload()
                },
                error: function () {
                    alert("异常！");
                }
            });
        }
        $(function () {
            debugger
            $.ajax({
                url: "<%=request.getContextPath()%>/queryUser",
                type: "post",
                dataType: "json",
                success: function (data) {
                    debugger
                    debugger
                    for (var i = 0; i <= data.length; i++) {
                        $("#noticServlet").append("<tr><td>" + (i + 1) + "</td><td>" + data[i].username + "</td><td>" + data[i].password + "</td><td>" + data[i].birthday + "</td><td>" + data[i].age + "</td><td>" + data[i].sex + "</td><td>" + data[i].clazz + "</td><td><a onclick=' getOne(this)' name='" + data[i].id + "'> 查看信息</a></td><td><a onclick=' dell(this)' name='" + data[i].id + "'> 删除用户</a></td><td><a onclick=' upd(this)' name='" + data[i].id + "'> 修改</a></td></tr>")
                    }
                },
                error: function (e) {
                    debugger
                }
            })
        })

        function upd(id) {
            debugger
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "<%=request.getContextPath()%>/queryUserById",//url
                data: {"id": id.name},
                success: function (result) {
                    debugger

                    $("#tb").after("<form id='form1' onsubmit='return false' action='submit()' method='post'>" +
                        "    ID: <input type='text' readonly='true' name='id' value='" + result.id + "'></br>" +
                        "    用 户 名 称:<input type='text' value='"+ result.username+"' name='username'></br>" +
                        "    用 户 密 码:<input type='text' value='"+ result.password+"'name='password'></br>" +
                        "    生 日 日 期:<input type='text' value='"+ result.birthday+"'name='birthday'></br>" +
                        "    用 户 年 龄:<input type='text' value='"+ result.age+"'name='age'></br>" +
                        "    用 户 性 别:<input type='text' value='"+ result.sex+"'name='sex'></br>" +
                        "    用 户 班 级:<input type='text' value='"+ result.clazz+"'name='clazz'></br>" +
                        "" +
                        "    <input type='button' value='注册' id='tj' onclick='sumit()'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" +
                        "    <input type='reset' value='重置'></br>" +
                        "</form>")


                    $("#tj").val("修改")
                    //$("input[name='noticeText']").value = result.noticeText;
                },
                error: function () {
                    alert("异常！");
                }
            });

        }

        function getOne(a) {
            alert(a.name)
            get(a.name)
        }

        function dell(a) {
            del(a.name)
        }

        function del(id) {
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "text",//预期服务器返回的数据类型
                url: "<%=request.getContextPath()%>/deleteUser",//url
                data: {"id": id},
                success: function (result) {

                    alert(result)
                    location.reload();
                },
                error: function () {
                    alert("异常！");
                }
            });

        }

        function get(id) {
            $.ajax({
                //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "<%=request.getContextPath()%>/queryUserById",//url
                data: {"id": id},
                success: function (result) {

                    alert("用户名称:" + result.username + "\n" + "用户名称:" + result.password + "\n" + "生日日期:" + result.birthday + "\n" + "年龄:" + result.age + "\n" + "性别:" + result.sex + "\n" + "班级:" + result.clazz + "\n")
                },
                error: function () {
                    alert("异常！");
                }
            });

        }


    </script>
    <style>
        table, table tr th, table tr td {
            border: 10px solid #0094ff;
        }

        table {
            width: 1800px;
            min-height: 25px;
            line-height: 25px;
            text-align: center;
            border-collapse: collapse;
        }
    </style>
</head>
<body>

<jsp:include page="page.jsp"/>
<table style="border:1px solid #0094ff" id="tb">
    <thead>
    <tr>
        <th>编号</th>
        <th>用户名称</th>
        <th>用户密码</th>
        <th>生日日期</th>
        <th>用户年龄</th>
        <th>用户性别</th>
        <th>用户班级</th>
        <th colspan="2">操作</th>
    </tr>
    </thead>
    <tbody id="noticServlet">

    </tbody>
</table>
<hr/>

</body>


<html/>